<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!-- 编辑用户模态框 -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">编辑用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑用户表单 -->
                <form id="editUserForm" action="UserServlet?action=update" method="post">
                    <input type="hidden" id="editUserId" name="id">
                    <div class="form-group">
                        <label for="editUsername">用户名</label>
                        <input type="text" class="form-control" id="editUsername" name="username" placeholder="留空则不修改">
                    </div>
                    <div class="form-group">
                        <label for="editEmail">电子邮件</label>
                        <input type="email" class="form-control" id="editEmail" name="email" placeholder="留空则不修改">
                    </div>
                    <div class="form-group">
                        <label for="editPhone">电话</label>
                        <input type="text" class="form-control" id="editPhone" name="phone" placeholder="留空则不修改">
                    </div>
                    <div class="form-group">
                        <label for="editGender">性别</label>
                        <select class="form-control" id="editGender" name="gender">
                            <option value="">留空则不修改</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editBalance">账户余额</label>
                        <input type="number" class="form-control" id="editBalance" name="balance" placeholder="留空则不修改">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 新增用户模态框 -->
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">新增用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 新增用户表单 -->
                <form action="UserServlet?action=insert" method="post">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮件</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender" name="gender">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="balance">账户余额</label>
                        <input type="number" class="form-control" id="balance" name="balance" value="0.00" step="0.01">
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 查询用户模态框 -->
<div class="modal fade" id="searchUserModal" tabindex="-1" role="dialog" aria-labelledby="searchUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchUserModalLabel">查询用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 查询用户表单 -->
                <form action="UserServlet" method="get">
                    <div class="form-group">
                        <label for="searchField">用户名或ID</label>
                        <!-- 输入框 -->
                        <input type="hidden" name="action" value="search">
                        <input type="text" class="form-control" id="searchField" name="query" placeholder="请输入用户名或ID" required>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-success">查询</button>
                </form>

            </div>
        </div>
    </div>
</div>
<script>
    // 刷新页面的 JavaScript 函数
    function refreshPage() {
        window.location.href = "UserServlet?action=list"; // 调用后端刷新用户列表
    }

    // 填充编辑表单
    function populateEditForm(id, username, email, gender, balance, phone) {
        // 设置隐藏字段中的用户ID
        document.getElementById("editUserId").value = id;

        // 填充其他表单字段
        document.getElementById("editUsername").value = username;
        document.getElementById("editEmail").value = email;
        document.getElementById("editPhone").value = phone;
        document.getElementById("editGender").value = gender;
        document.getElementById("editBalance").value = balance;
    }
</script>
</div>
</div>
